<template>
  <div>
    <!-- 灰色消息提示文案 -->
    <el-alert title="警告" type="info" show-icon style="margin:10px"> </el-alert>
    <!-- 表格 -->
    <el-table :data="userlist" style="width: 100%">
      <el-table-column label="试题编号" prop="number">
      </el-table-column>
      <el-table-column label="学科" prop="subjectID">
        <template v-slot="scope">
          {{ subject(scope.row.subjectID) }}
        </template>
      </el-table-column>
      <el-table-column label="目录" prop="catalogID">
        <template v-slot="scope">
          {{ catalogmode(scope.row.catalogID) }}
        </template>
      </el-table-column>
      <el-table-column label="题型" prop="questionType">
        <template v-slot="scope">
          {{ enterprisemode(scope.row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column
        label="题干"
        prop="question"
      >
      <template #default="scope">
       <span v-html="scope.row.question"></span>
      </template>
      </el-table-column>
      <el-table-column label="录入时间" prop="addDate">
        <template #default="scope">
          {{timeMode(scope.row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column label="难度" prop="difficulty">
        <template v-slot="scope">
          {{ transGender(scope.row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column label="录入人" prop="creator">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <!-- 浏览按钮 -->

          <el-button
            @click.native="preview(scope.row.id)"
            type="text"
            size="small"
            style="
              background-color: #b3d8ff;
              color: #409eff;
              background: #ecf5ff;
            "
            circle
            icon="el-icon-view"
            title="浏览"
          >
          </el-button>

          <!-- 修改按钮 -->

          <el-button
            @click.native="modifyBtn(scope.row.id)"
            plain
            type="text"
            size="small"
            style="color: #67c23a; background: #f0f9eb; border-color: #c2e7b0 "
            circle
            icon="el-icon-edit"
            title="修改"
          >
          </el-button>

          <!-- 删除按钮 -->

          <el-button
            @click.native="DeleteBtn(scope.row.id)"
            type="text"
            size="small"
            style="color: #f56c6c; background: #fef0f0; border-color: #fbc4c4"
            circle
            icon="el-icon-delete"
            title="删除"
          >
          </el-button>

          <!-- 提交到精选按钮 -->

          <el-button
            @click.native="selectedBtn(scope.row.id)"
            type="text"
            size="small"
            style="color: #e6a23c; background: #fdf6ec; border-color: #f5dab1"
            circle
            icon="el-icon-check"
            title="提交到精选"
          >
          </el-button>
        </template>
      </el-table-column>
      <!-- 精选提示框 -->
    </el-table>

    <dialogVisible
      :showdialog="showdialog"
      :data-lista="dataLista"
      @dialogVisible="closewindow"
    />
  </div>
</template>
<script>
import dayjs from 'dayjs'
import dialogVisible from '@/module-hmmm/management/dialogVisible'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
export default {
  props: {
    sousuo: {
      type: Array
    },
    questionList: {
      type: Array
    }
  },
  watch: { // 监听器
    sousuo () {
      this.userlist = this.sousuo
    },
    questionList () {
      this.userlist = this.questionList
    }
  },
  data () {
    return {
      dialogVisible: false, // 精选题库关闭按钮
      currentPage1: 1,
      // 上面为页码假数据
      formInline: {
        user: '',
        region: ''

      },
      userlist: [],
      showdialog: false,
      dataList: {},
      choiceState: {},
      dataLista: {},
      formdage: { page: 1, pagesize: 5 },
      zongshu: 0
    }
  },
  components: {
    dialogVisible
  },
  mounted () {
    this.objlist()
    this.userlist = this.sousuo
    this.qingchu()
  },
  methods: {
    async objlist () {
      const res = await list(this.formdage)
      console.log('基础题库列表', res)
      this.userlist = res.data.items
      this.zongshu = res.data.counts
      this.yemian()
      console.log(this.zongshu)
    },
    onSubmit () {
      console.log('submit!')
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    transGender (difficulty) {
      // 题型难度
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[difficulty]
    },
    subject (subjectID) {
      // 学科
      const xue = {
        1: '测试',
        4: '前端'
      }
      return xue[subjectID]
    },
    catalogmode (catalogID) {
      // 目录
      const mulu = {
        5: 'css基础',
        2: 'javaWEB',
        1: 'java基础',
        6: 'js基础'
      }
      return mulu[catalogID]
    },
    enterprisemode (questionType) {
      // 题型
      const tixing = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return tixing[questionType]
    },
    async DeleteBtn (id) {
      // 删除功能
      this.$confirm('你确定要删除么？', '温馨提示')
        .then(async () => {
          await remove({ id })
          this.objlist()
          this.$message.success('删除数据成功')
        })
        .catch((error) => {
          console.log(error)
        })
    },
    closewindow () {
      // 关闭弹窗
      this.showdialog = false
    },
    async preview (id) {
      // 浏览打开按钮
      const res = await detail({ id })
      console.log(res)
      this.dataLista = res.data
      this.showdialog = true
      this.xuanti = res.data.options
      // this.dataList = data
    },
    modifyBtn (data) {
      // 修改按钮
      this.showdialog = true
      this.dataList = data
      this.$router.push({ path: 'new', query: { id: data } })
      console.log('跳转页面的ID值', data)
    },
    // 加入精选按钮
    selectedBtn (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
        // 调入加入精选题库接口
        const res = await choiceAdd({ id: id, choiceState: 1 })
        console.log('精选列表', res)
        // 重新刷新列表
        this.objlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选'
        })
      })
    },
    // 处理时间
    timeMode (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 清除按钮后，重新刷新列表数据
    qingchu () {
      this.$emit('shuaXin')
    },
    yemian () {
      this.$emit('yema', this.zongshu)
      console.log(this.zongshu)
    }
  }
}
</script>

<style scoped >
</style>
